import { Suspense } from 'react'
import { Navigate, createBrowserRouter } from 'react-router-dom'
import RequireAuth from '../components/Auth'
import Loading from '../components/Loading'
import Layout from '../pages/Layout'
import { About, Home } from './lazyFc'
import { CrownFilled, SmileFilled } from '@ant-design/icons'
import WjIcon from '@/components/WjIcon'

const load = (children: JSX.Element) => (
  <Suspense fallback={<Loading />}>{children}</Suspense>
)

const routes = [
  {
    path: '/',
    element: (
      <RequireAuth>
        <Layout />
      </RequireAuth>
    ),
    children: [
      {
        path: 'home',
        name: '首页',
        element: load(<Home />),
        icon: <SmileFilled />,
      },
      {
        path: 'team',
        name: '团队管理',
        element: <Navigate to='/team/deliverymanManagement' />,
        icon: <CrownFilled />,
        children: [
          {
            path: 'deliverymanManagement',
            name: '配送员管理',
            key: '/team/deliverymanManagement',
            element: load(<About />),
            icon: <WjIcon name='menus-doctor' />,
          },
        ],
      },
    ],
  },
]

export const menuRoutes = routes[0]

const router = createBrowserRouter(routes)

export default router
